import React, { useState } from 'react';
import s from './style.module.css';
import { Table, Pagination,Loading } from '@knownsec/react-component';
import { updateLogApi,} from '~/API';
import moment from 'moment';
export default function list() {
  const [refe] = useState(false);
  const [tableData, setTableData] = useState({ data: [], total: 0 });
  const [loading, setLoading] = useState(false)
  const [searchInfo, setSearchInfo] = useState({ page: 1, page_size: 10 });
  const getList = async (query=searchInfo) => {
    setLoading(true)
    setTableData({ data: [], total: 0 });
    const list = await updateLogApi(query);
    console.log('[ list ]-15', list)
    const data = list.data.results.map((e) => {
      e.id = e.device_id;
      return e;
    });
    setTableData({ data, total: list.data.count });
    setLoading(false)
  };
  React.useMemo(() => {
    getList();
  }, []);
  const columns = [
    {
      title: '升级时间',
      dataIndex: 'started_at',
      render: (value) => (value ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '--'),
    },
    {
      title: '升级类型',
      dataIndex: 'update_type',
      className: s.center,
      render: (cur, item) => {
        return (
          <span>
            {item.upgrade_type === 'system' ? '系统升级' : '数据升级'}
          </span>
        )
      }
    },
    {
      title: '升级结果',
      dataIndex: 'status',
      className: s.center,
      render: cur => {
        return <span>{cur === 'success' ? '升级成功' : '升级失败'}</span>
      }
    },
    {
      title: '升级版本',
      render: (cur, item) => {
        return <span>{item.package_version || '-'}</span>
      }
    },
    {
      title: '升级详情',
      dataIndex: 'upgrade_infos',
      render: (e,row) => {
        console.log('[e]-75',e )
        return <pre className={s.infoPre}>{e}</pre>
      }
    },
  ];

  return (
    <div className={s.wordMain}>
      {/* <Loading show={loading} /> */}
      <Table
        refre={refe}
        tableLoading={loading}
        loadingLabel=""
        columns={columns}
        className={s.table}
        data={tableData.data}
      ></Table>
      {tableData.total > 10 && <Pagination
        key={Number(123)}
        className={s.pagination}
        current={searchInfo.page}
        showQuickJumper={{ goButton: true }}
        showSizeChanger={true}
        showTotal={(total) => `共${total}条`}
        pageSize={searchInfo.page_size}
        pageSizeOptions={['10', '20', '50']}
        total={tableData.total}
        onChange={(page, limit) => {
          setSearchInfo({ page, page_size: limit });
          getList({ page, page_size: limit })
        }}
      />}
    </div>
  );
}
